<template>
  <div class="orders-container">
    <a-card :bordered="false" :style="{ height: '100%' }">
      <template #title>
        <div class="title-container">
          {{ title }}

          <span class="icon" v-if="hasPagination">{{ total }}</span>
        </div>
      </template>

      <a slot="extra" href="#" v-if="hasPagination" @click.prevent="more">更多</a>

      <div class="card-content-container">
        <a-list item-layout="horizontal" :data-source="pagination.items">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta
              :description="item.create_time | dateFormat('DD/MM/YYYY HH:mm')"
            >
              <a slot="title" @click.prevent="details(item)">{{ item.number }} {{ type }}
                <template v-if="!hideMoney">
                  ${{ item.borrow_money }}
                </template>
                {{ tips }}</a>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  computed: {
    hasPagination () {
      return this.pagination.items.length
    },

    total () {
      const { total } = this.pagination
      return total >= 100 ? '99+' : total
    },
  },

  props: {
    type: {
      type: String,
      default: () => '借款',
    },

    hideMoney: {
      type: Boolean,
      default: () => false,
    },

    tips: {
      type: String,
      default: () => '',
    },

    pagination: {
      type: Object,
      default: () => ({}),
    },

    status: {
      type: Object,
      default: () => ({}),
    },

    title: {
      type: String,
      default: () => '',
    },
  },

  methods: {
    // 更多
    more () {
      this.$emit('more')
    },

    // 详情
    details (item) {
      this.$emit('details', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
  background-color: $red;
  border-radius: 25px;
  color: $white;
  margin-left: $margin-xs;
  font-size: $font-size-sm;
  padding: 0 $padding-base;
}

.card-content-container {
  min-height: 300px;
}
</style>
